<template>
<!-- 商品维护 -->
	<div id="SupplierMaintain">
		<el-table :data="maintainAry" style="width: 100%">
		  <el-table-column prop="id" label="编号" width="180">
		  </el-table-column>
		  <el-table-column prop="name" label="商品名称" width="180">
		  </el-table-column>
		  <el-table-column prop="price" label="价格">
		  </el-table-column>
      <el-table-column prop="unit" label="单位">
		  </el-table-column>
		  <el-table-column prop="imgLink" label="图片">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="square"  :src="scope.row.imgLink" @error="errorHandler">
            <img :src="scope.row.imgLink"/>
          </el-avatar>
        </template>
		  </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		      <template slot-scope="scope">
		      <el-button
					size="small"
					type="warning"
					round 
					icon=""
					@click="updSupplierMaintain(scope.$index,scope.row)">维护</el-button>
          <el-button
                size="small"
                type="danger"
                round
                icon=""
                @click="delSupplier(scope.$index,scope.row)">取消供应</el-button>
		      </template>
		    </el-table-column>
		 </el-table>
		 <!---分页组件-->
		     <el-pagination
		       @size-change="handleSizeChange"
		       @current-change="handleCurrentChange"
		       :current-page="currentPage"
		       :page-sizes="pageSizeList"
		       :page-size="pageSize"
		       layout="total, sizes, prev, pager, next, jumper"
		       :total="total">
		     </el-pagination>
    <!--  维护对话框  -->
    <el-dialog title="维护商品" :visible.sync="supplierview" width="600px">
      <el-form :model="Supplierupdate">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="Supplierupdate.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="Supplierupdate.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="Supplierupdate.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="Supplierupdate.unit" autocomplete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="图片" :label-width="formLabelWidth">-->
<!--          <el-input v-model="Supplierupdate.minAmount" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisibleupd = false">取 消</el-button>
        <el-button type="primary" @click="updateSupplierupd">确 定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return{
			  //展示对话框
        supplierview:false,
        formLabelWidth:120,
			  //维护商品对话框
        Supplierupdate:{},
			  //供应商商品表格
        maintainAry:[],
				// 当前页号
				currentPage: 1,
				// 当前页大小
				pageSize: 5,
				// 总记录数
				total: 0,
				// 页大小列表
				pageSizeList: [2, 5, 10, 20]
			}
		},
		methods:{
		      //维护确定按钮
          async updateSupplierupd(){
            const {data: ress} = await this.$http.post(`/supplierProduct/SupplierupdByIdList`,this.Supplierupdate)
            this.supplierview=false
            //再次调用查询
            this.maintainPage()
            //消息提示
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            });
          },
		      //维护商品
          async updSupplierMaintain(index,row){
            this.supplierview=true
            const {data: res} = await this.$http.post(`/supplierProduct/SupplierupdById/${row.id}`)
            this.Supplierupdate=res
          },
		      //取消供应
		      async delSupplier(index,row){
            const {data: res} = await this.$http.post(`/supplierProduct/SupplierDelById/${row.id}`)
            //再次调用查询
            this.maintainPage()
            console.log(row.id)
            //消息提示
            this.$message({
              showClose: true,
              message: '取消供应成功',
              type: 'success'
            });
          },
				  //页大小改变
			    handleSizeChange(val) {
			        this.pageSize = val
              //再次调用查询
			        this.maintainPage()
			    },
			    // 页号改变
			    handleCurrentChange(val) {
			      this.currentPage = val
            //再次调用查询
            this.maintainPage()
		      },
          //查询供应商商品信息
          async maintainPage(){
            //拿用户id
            this.sysUsersId=this.$store.state.user.sysUsersId
            console.log(this.sysUsersId)
            //定义用户id
            let sysUsersId=this.sysUsersId
            //带用户id去分页查询
            const {data: res} = await this.$http.post(`supplierProduct/SupplierProductListPage/
            ${sysUsersId}/${this.currentPage}/${this.pageSize}`,this.searchObj)
            this.maintainAry=res.list
            console.log(res.list)
            this.total=res.total
          },
          //头像展示失败
          errorHandler() {
            return true
          },
	  },
    created() {
      this.maintainPage()
    }
  }
</script>

<style>
</style>